<template>
  <div>
    <main>
      <div class="title">
        <div class="bt">复习作业</div>
      </div>
      <!-- <div class="desc">
        {{ item.content }}
      </div> -->
      <!-- <div class="topic">
        {{ item.describe }}
      </div> -->
      <!-- <div v-if="item.url">
        <Audioplayer v-if="item.url != null" :url="item.url"></Audioplayer>
      </div> -->
      <div class="content">
        <workDetail
          :item="item"
          :fibContent="fibContent"
          :content="content"
        ></workDetail>
      </div>
      <div class="switches">
        <el-switch
          v-model="value1"
          inactive-color="#cccccc"
          active-color="#ff5e4e"
        >
        </el-switch
        ><span style="color: #999">查看答案</span>
        <el-switch
          v-model="value2"
          inactive-color="#cccccc"
          active-color="#13bfbf"
        >
        </el-switch
        ><span style="color: #999">查看解析</span>
      </div>
      <div class="answer" v-if="value1 === true">
        <div v-if="item.subjectAnswer">参考答案</div>
        <!-- <div class="content" v-if="item.typeCode=='SST'">
          {{ item.answer }}
        </div> -->
        <div class="content">
          {{ item.subjectAnswer }}
        </div>
      </div>
      <div class="jx" v-if="value2 === true">
        <div v-if="item.isPz == '1'">教师批注</div>
        <div class="content">
          {{ item.comments }}
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Audioplayer from '../myhomework/audioplayer'
import workDetail from './workDetail'
export default {
  components: {
    workDetail,
    // Audioplayer
  },
  data () {
    return {
      value1: false,
      value2: false,
      item: {},
      fibContent: [],
      content:[]
    }
  },
  created () {
    this.item = JSON.parse(sessionStorage.getItem('item'))
    this.fibContent = this.item.content.split('(PARAM)')
    this.content = this.item.content.split(' ')
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
main {
  padding: 0 1.25rem;
  .title {
    height: 4.875rem;
    line-height: 4.875rem;
    border-bottom: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 1.25rem;
    .bt {
      height: 100%;
      color: #333;
      font-weight: bold;
    }
    .btn {
      width: 10rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      background-color: #ff5e4e;
      border-radius: 0.625rem;
      color: #fff;
      margin: auto 0;
      cursor: pointer;
    }
  }
  .desc {
    background: #fffafa;
    border: 1px dotted #ff5e4e;
    padding: 1.875rem;
    font-size: 1.125rem;
    color: #333;
    line-height: 2rem;
    margin-top: 1.25rem;
  }
  .topic {
    font-size: 1.5rem;
    color: #333;
    height: 6.375rem;
    line-height: 2.375rem;
    // padding: 0 1.875rem;
    margin-top: 1rem;
  }
  .content {
    // padding: 0 1.875rem;
    font-size: 1.125rem;
  }
  .switches {
    margin-top: 1.875rem;
    padding-left: 1.875rem;
    margin-bottom: 1.875rem;
    span {
      margin-right: 30px;
    }
  }
  .answer {
    font-size: 1.75rem;
    color: #333;
    padding: 0 1.875rem;
    .content {
      font-size: 1.125rem;
      color: #666;
      margin-top: 0.625rem;
    }
  }
  .jx {
    font-size: 1.75rem;
    color: #13bfbf;
    padding: 0 1.875rem;
    margin-top: 1.875rem;
    .content {
      font-size: 1.125rem;
      color: #13bfbf;
      margin-top: 0.625rem;
    }
  }
}
</style>
